<template>
  <div class="app-container">
    <el-steps :active="active" finish-status="success" simple>
      <el-step>
        <span slot="title">
          填写课程信息
          <svg-icon icon-class="edit"/>
        </span>
      </el-step>
      <el-step>
        <span slot="title">
          创建课程大纲
          <svg-icon icon-class="clipboard"/>
        </span>
      </el-step>
      <el-step>
         <span slot="title">
          发布课程
          <svg-icon icon-class="upload"/>
        </span>
      </el-step>
    </el-steps>
    <!-- 填写课程基本信息 -->
    <info v-if="active === 0"/>
    <!-- 创建课程大纲 -->
    <chapter v-if="active === 1"/>
    <!-- 发布课程 -->
    <publish v-if="active === 2 || active === 3"/>
  </div>
</template>

<script>
import Info from '@/views/course/components/Info'
import Chapter from '@/views/course/components/Chapter'
import Publish from '@/views/course/components/Publish'

export default {
  name: 'Form',
  components: { Info, Chapter, Publish },
  data() {
    return {
      active: 0,
      courseId: null,
      courseTitle: null
    }
  },
  created() {
    // 获取路由中的id
    if (this.$route.name === 'CourseInfoEdit') {
      this.courseId = this.$route.params.id
      this.active = 0
    }
    if (this.$route.name === 'CourseChapterEdit') {
      this.courseId = this.$route.params.id
      this.active = 1
    }
  }
}
</script>

<style scoped>

</style>
